<template>
  <div>
    <el-dialog
      class="my-dialog"
      :class="dialogClassName"
      :visible.sync="dialog"
      :width="width"
      :title="!isDetail ? title : ''"
      :fullscreen="fullscreen"
      :append-to-body="true"
      :close-on-click-modal="closeOnClickModal"
      center
      :top="top + ' !important'"
      :before-close="handleClose"
      :style="[{ height: height }]"
      :show-close="showClose"
      :custom-class="customClass"
      v-loading="loading"
      @close="close"
    >
      <dv-border-box-8>
        <div class="dialog-title" v-if="isDetail">
          <div class="title-icon"></div>
          {{ title || "提示" }}
          <!-- <div class="title-line"></div> -->
        </div>
        <div
          class="dialog-tools"
          v-else-if="false && titleMenus && titleMenus.length"
        >
          <div
            class="tools-item"
            v-for="(it, ind) in titleMenus"
            :key="ind"
            :class="currentTools == ind ? 'tools-item_active' : ''"
            @click="setMenu(ind)"
          >
            {{ it }}
          </div>
          <div class="title-close iconfont icon-guanbi" @click="close"></div>
        </div>
        <!-- 全屏按钮 -->
        <!-- <div class="dialog-screen" @click="setScreen" v-if="isShowFullscreen">
          <i class="el-icon-full-screen"></i>
        </div> -->
        <div class="dialog-close" @click="close">
          <i class="el-icon-close"></i>
        </div>
        <div class="dialog-body" :style="[{ height: bodyHeight }]">
          <slot></slot>
        </div>
        <slot name="btm-footer" slot="footer"></slot>
      </dv-border-box-8>
    </el-dialog>
  </div>
</template>

<script>
/**
 * 自定义弹窗
 * @param {String}	  	title               标题
 * @param {Boolean}  		dialog		          是否显示弹窗（默认false）
 * @param {String}  		width		            宽度（默认60%）
 * @param {String}  		height		          弹窗高度（默认100%）
 * @param {String}  		bodyHeight		      内容高度（默认70vh）
 * @param {Number}  		closeOnClickModal	  是否可以通过点击 modal 关闭 Dialog（默认false）
 * @param {String}  		top	                距离顶部距离（默认 5vh）
 * @param {String}  		isShowFullscreen	  是否显示全屏按钮（默认 true）
 * @param {String}  		isFullscreen	      是否全屏（默认 false）
 * @param {String}  		isDetail	          是否是详情（详情标题自定义样式，默认 false）
 * @param {String}  		isBeforeClose	      关闭前是否拦截（只拦截右上角返回，默认 false）
 * @param {String}  		showClose	          是否显示右上角关闭按钮（默认 true）
 * @param {String}  		dialogClassName	    弹窗 class 名称
 * @param {Array}  		  titleMenus    	    标题按钮
 * @param {String}  		customClass    	    Dialog 的自定义类名
 *
 * @event {Function()} 	close               关闭弹窗时触发
 * @event {Function()} 	before-close 			  关闭弹窗之前触发
 * @event {Function()} 	headerChange 			  标题切换回调
 *
 * 插槽：btm-footer
 *
 * @example <z-dialog title="123" :dialog="dialog" @close="dialog = false"></z-dialog>
 * */

import props from "./props.js";
export default {
  name: "GDialog",
  mixins: [props],
  data() {
    return {
      fullscreen: false, // 是否为全屏 Dialog
      loading: false,
      currentTools: 0,
    };
  },
  watch: {
    isFullscreen: {
      handler(val) {
        this.fullscreen = !!val;
      },
      immediate: true,
    },
  },
  methods: {
    // 设置dialog放大缩小
    setScreen() {
      this.fullscreen = !this.fullscreen;
    },
    close() {
      this.$emit("close");
    },
    handleClose() {
      if (this.isBeforeClose) {
        this.$emit("before-close");
      } else {
        this.close();
      }
    },
    setMenu(index) {
      this.currentTools = index;
      this.$emit("headerChange", index);
    },
  },
};
</script>

<style lang="scss">
.my-dialog {
  // height: 100vh;
  .el-dialog {
    .el-dialog__header {
      // min-height: 40px;
      // box-sizing: border-box;
      display: none;
    }
    // /deep/.el-dialog__body {
    .el-dialog__body {
      padding: 0;
      position: relative;
    }
    &.is-fullscreen {
      height: 100% !important;
    }
  }
  .dialog-screen {
    width: 20px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 10px;
    right: 40px;
    color: #fff;
    cursor: pointer;
  }
  .dialog-close {
    width: 20px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
  }
  .dialog-title {
    width: calc(100% - 50px);
    height: 40px;
    line-height: 40px;
    // position: absolute
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    padding: 0 25px 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .title-icon {
      width: 5px;
      height: 22px;
      border-radius: 2px;
      background: rgba(77, 209, 220, 0.5);
      margin-right: 6px;
    }
    .title-line {
      height: 2px;
      width: 100%;
      border-radius: 4px;
      background: rgba(77, 209, 220, 0.5);
      margin-right: 6px;
    }
  }
  .dialog-tools {
    background: #8af7f7;
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 8vh;
    box-sizing: border-box;
    position: relative;

    .tools-item {
      height: 100%;
      color: #fff;
      font-size: 3vh;
      font-weight: 500;
      padding: 10px 20px 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      &.tools-item_active {
        background: #fff;
        color: #75e5e5;
        font-weight: bold;
      }
    }
    .title-close {
      color: #fff;
      font-weight: 500;
      padding: 0;
      right: 2vh;
      top: 2vh;
    }
  }
  .dialog-body {
    overflow-y: auto;
    height: 70vh;
  }
}
</style>